<template>
  <el-form ref="qmGenForm" label-width="140px" class="qm-gen-form">
    <h4 style="padding-left: 20px;">App图标</h4>
    <el-row>
      <el-col :span="24">
        <el-form-item label="App图标：">
          <input type="file" @change="getFile($event, 'AppIcon', '1024x1024')" />
          <a
            target="_blank"
            :href="server + '/attachment/download?attachmentId=' + models.model.appIconAttachmentId"
            v-text="models.model.appIconName"
          ></a>
          <p style="color: red; margin: 4px 0;">* 1、图标必须是直角，不要使用圆角图标</p>
          <p style="color: red; margin: 4px 0;">* 2、图标必须是1024*1024</p>
          <p style="color: red; margin: 4px 0;">* 3、图标不要包含透明信息（alpha通道）</p>
        </el-form-item>
      </el-col>
    </el-row>

    <h4 style="padding-left: 20px;">Andorid启动图片设置</h4>
    <el-row>
      <el-col :span="24">
        <el-form-item label="480x762 ：">
          <input type="file" @change="getFile($event, 'AppSplash', '480x762', 'Android')" />
          <a
            target="_blank"
            :href="server + '/attachment/download?attachmentId=' + models.model.appSplash480x762AttachmentId"
            v-text="models.model.appSplash480x762Name"
          ></a>
          <p style="color: #c5cacb; margin: 4px 0;">hdpi高分屏启动图片</p>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-form-item label="720x1242 ：">
          <input type="file" @change="getFile($event, 'AppSplash', '720x1242', 'Android')" />
          <a
            target="_blank"
            :href="server + '/attachment/download?attachmentId=' + models.model.appSplash720x1242AttachmentId"
            v-text="models.model.appSplash720x1242Name"
          ></a>
          <p style="color: #c5cacb; margin: 4px 0;">xhdpi 720P高分屏启动图片</p>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-form-item label="1080x1882 ：">
          <input type="file" @change="getFile($event, 'AppSplash', '1080x1882', 'Android')" />
          <a
            target="_blank"
            :href="server + '/attachment/download?attachmentId=' + models.model.appSplash1080x1882AttachmentId"
            v-text="models.model.appSplash1080x1882Name"
          ></a>
          <p style="color: #c5cacb; margin: 4px 0;">xxhdpi 1080P高分屏启动图片</p>
        </el-form-item>
      </el-col>
    </el-row>

    <h4 style="padding-left: 20px;">iPhone启动图片设置</h4>
    <el-row>
      <el-col :span="24">
        <el-form-item label="1242x2688 ：">
          <input type="file" @change="getFile($event, 'AppSplash', '1242x2688', 'iOS')" />
          <a
            target="_blank"
            :href="server + '/attachment/download?attachmentId=' + models.model.appSplash1242x2688AttachmentId"
            v-text="models.model.appSplash1242x2688Name"
          ></a>
          <p style="color: #c5cacb; margin: 4px 0;">6.5英寸设备启动图片</p>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-form-item label="828x1792 ：">
          <input type="file" @change="getFile($event, 'AppSplash', '828x1792', 'iOS')" />
          <a
            target="_blank"
            :href="server + '/attachment/download?attachmentId=' + models.model.appSplash828x1792AttachmentId"
            v-text="models.model.appSplash828x1792Name"
          ></a>
          <p style="color: #c5cacb; margin: 4px 0;">6.1英寸设备启动图片</p>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-form-item label="1125x2436 ：">
          <input type="file" @change="getFile($event, 'AppSplash', '1125x2436', 'iOS')" />
          <a
            target="_blank"
            :href="server + '/attachment/download?attachmentId=' + models.model.appSplash1125x2436AttachmentId"
            v-text="models.model.appSplash1125x2436Name"
          ></a>
          <p style="color: #c5cacb; margin: 4px 0;">5.8英寸设备启动图片</p>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-form-item label="1242x2208 ：">
          <input type="file" @change="getFile($event, 'AppSplash', '1242x2208', 'iOS')" />
          <a
            target="_blank"
            :href="server + '/attachment/download?attachmentId=' + models.model.appSplash1242x2208AttachmentId"
            v-text="models.model.appSplash1242x2208Name"
          ></a>
          <p style="color: #c5cacb; margin: 4px 0;">5.5英寸设备启动图片</p>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-form-item label="750x1334 ：">
          <input type="file" @change="getFile($event, 'AppSplash', '750x1334', 'iOS')" />
          <a
            target="_blank"
            :href="server + '/attachment/download?attachmentId=' + models.model.appSplash750x1334AttachmentId"
            v-text="models.model.appSplash750x1334Name"
          ></a>
          <p style="color: #c5cacb; margin: 4px 0;">4.7英寸设备启动图片</p>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-form-item label="640x1136 ：">
          <input type="file" @change="getFile($event, 'AppSplash', '640x1136', 'iOS')" />
          <a
            target="_blank"
            :href="server + '/attachment/download?attachmentId=' + models.model.appSplash640x1136AttachmentId"
            v-text="models.model.appSplash640x1136Name"
          ></a>
          <p style="color: #c5cacb; margin: 4px 0;">4.0英寸设备启动图片</p>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-form-item label="640x960 ：">
          <input type="file" @change="getFile($event, 'AppSplash', '640x960', 'iOS')" />
          <a
            target="_blank"
            :href="server + '/attachment/download?attachmentId=' + models.model.appSplash640x960AttachmentId"
            v-text="models.model.appSplash640x960Name"
          ></a>
          <p style="color: #c5cacb; margin: 4px 0;">3.5英寸设备启动图片</p>
        </el-form-item>
      </el-col>
    </el-row>

    <h4 style="padding-left: 20px;">iPad启动图片设置，暂不支持</h4>
  </el-form>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "mobile-mobileApp-icon",
  props: {
    appId: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      models: {
        model: {},
        appSplashs: [],
      },
      server: process.env.VUE_APP_SERVER,
    };
  },
  methods: {
    getFile(event, type, reserved1, reserved2) {
      let file = event.target.files[0];
      this.upload(file, type, reserved1, reserved2);
    },
    upload(file, type, reserved1, reserved2) {
      let formData = new FormData();
      formData.append("file", file);
      formData.append("dataKey", this.appId);
      formData.append("type", type);
      formData.append("reserved1", reserved1 ? reserved1 : "");
      formData.append("reserved2", reserved2 ? reserved2 : "");

      request({
        url: "/attachment/upload",
        method: "post",
        data: formData,
        header: { "Content-Type": "multipart/form-data" },
      })
        .then((r) => {
          if (r && r.attachmentId) {
            if (type === "AppIcon") {
              this.models.model.appIconAttachmentId = r.attachmentId;
              this.models.model.appIconName = r.fileName;
            } else {
              this.models.model[`appSplash${reserved1}AttachmentId`] =
                r.attachmentId;
              this.models.model[`appSplash${reserved1}Name`] = r.fileName;
            }

            this.notifySuccess("上传成功");
          } else {
            this.notifyError((r || {}).message || "服务器出现异常，请稍后再试");
          }
        })
        .catch((e) => {
          this.notifyError((e || {}).message || "服务器出现异常，请稍后再试");
        });
    },
    getData() {
      request({
        url: "/mobile/mobileApp/iconModel",
        method: "post",
        data: { appId: this.appId },
      }).then((vm) => {
        this.models = vm.models;
        this.initData();
      });
    },
    initData() {
      let sizes = [
        "480x762",
        "720x1242",
        "1080x1882",
        "1242x2688",
        "828x1792",
        "1125x2436",
        "1242x2208",
        "750x1334",
        "640x1136",
        "640x960",
      ];
      this.$set(this.models.model, "appIconAttachmentId", "");
      this.$set(this.models.model, "appIconName", "");

      for (let i = 0; i < sizes.length; i++) {
        let size = sizes[i];
        this.$set(this.models.model, "appSplash" + size + "AttachmentId", "");
        this.$set(this.models.model, "appSplash" + size + "Name", "");
      }

      let appIcon = this.models.appIcon;
      if (appIcon) {
        this.models.model.appIconAttachmentId = appIcon.attachmentId;
        this.models.model.appIconName = appIcon.fileName;
      }
      let appSplashs = this.models.appSplashs;
      let added = [];
      for (let i = 0; i < appSplashs.length; i++) {
        let appSplash = appSplashs[i];
        if (added.includes(appSplash.reserved1)) {
          continue;
        }
        this.models.model["appSplash" + appSplash.reserved1 + "AttachmentId"] =
          appSplash.attachmentId;
        this.models.model["appSplash" + appSplash.reserved1 + "Name"] =
          appSplash.fileName;

        added.push(appSplash.reserved1);
      }
    },
  },
  created() {
    this.getData();
  },
};
</script>

<style scoped>
</style>